import React, {useEffect, useRef, useState} from 'react';
import {Table,Select} from 'antd';
import {connect} from 'umi';
import {assessGradeList} from "@/utils/constant";
import numeral from 'numeral';
import {resultStrSum} from "@/utils/utils";

const {Option} = Select;

const UnitManageTable = (props) => {

  const {onCompute,cycle,data} = props;
  const monthData = [
    {title: '1月', align: 'center', dataIndex: 'monthOne',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '2月', align: 'center', dataIndex: 'monthTwo',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '3月', align: 'center', dataIndex: 'monthThree',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '4月', align: 'center', dataIndex: 'monthFour',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '5月', align: 'center', dataIndex: 'monthFive',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '6月', align: 'center', dataIndex: 'monthSix',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '7月', align: 'center', dataIndex: 'monthSeven',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '8月', align: 'center', dataIndex: 'monthEight',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '9月', align: 'center', dataIndex: 'monthNine',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '10月', align: 'center', dataIndex: 'monthTen',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '11月', align: 'center', dataIndex: 'monthTwelve',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '12月', align: 'center', dataIndex: 'threeMonth',render: (text) => {return text ? numeral(text).format('0.00') : '';}},
    {title: '一季度', align: 'center', dataIndex: 'firstQuarter'},
    {title: '半年', align: 'center', dataIndex: 'halfQuarter'},
    {title: '三季度', align: 'center', dataIndex: 'thirdQuarter'},
    {title: '年度', align: 'center', dataIndex: 'yearQuarter'},
    {
      title: '本次绩效', align: 'center', dataIndex: 'performanceLevel',width:'12%',
      render: (text, record) => {
        return (
          <Select placeholder="请选择" value={text} onChange={(e) => updateRow(e, record.key)}>
            {assessGradeList.map((item, index) => {
              return (
                <Option value={`${item.value}`} key={item.value}>
                  {item.label}
                </Option>
              )
            })}
          </Select>
        )
      },
    },
  ];
  const columns = [
    {
      title: '公司',
      dataIndex: 'orgName',
      align:'center',
      fixed: 'left',
      width:120
    },
    {
      title: '平均分数',
      dataIndex: 'fraction',
      align:'center',
      fixed: 'left',
      width:100,
      render:(text,record) => {
        let obj = {};
        if(cycle === 1){
          obj = {monthOne:record.monthOne,monthTwo:record.monthTwo,monthThree:record.monthThree};
        }else if(cycle === 2){
          obj = {monthOne:record.monthOne,monthTwo:record.monthTwo,monthThree:record.monthThree,monthFour:record.monthFour,monthFive:record.monthFive,monthSix:record.monthSix};
        }else if(cycle === 3){
          obj = {monthSeven:record.monthSeven,monthEight:record.monthEight,monthNine:record.monthNine}
        }else if(cycle === 4){
          obj = {monthOne:record.monthOne,monthTwo:record.monthTwo,monthThree:record.monthThree,monthFour:record.monthFour,monthFive:record.monthFive,monthSix:record.monthSix,
            monthSeven:record.monthSeven,monthEight:record.monthEight,monthNine:record.monthNine,monthTen:record.monthTen,monthTwelve:record.monthTwelve,threeMonth:record.threeMonth};
        }
        return resultStrSum(obj);
      }
    }
  ];
  const [tempData,setTempData] = useState([]);

  const getRowByKey = (key, newData) => (newData || tempData)?.filter((item) => item.key === key)[0];
  const updateRow = (e,key) => {
    const newData = [...tempData];
    const target = getRowByKey(key, newData);
    if (target) {
      target['performanceLevel'] = e;
      setTempData(newData);
      onCompute(newData);
    }
  };

  useEffect(() => {
    if(data.length > 0){
      if(tempData.length > 0){
        let temp = data.filter(x => tempData.every(y => y.orgId !== x.orgId));
        setTempData([...tempData,...temp]);
      }else{
        setTempData(data);
      }
    }
  },[data]);

  if(cycle){
    let tempData;
    if(cycle === 1){
      tempData = monthData.slice(0,3).concat(monthData.slice(12,13));
    }else if(cycle === 2){
      tempData = monthData.slice(0,6).concat(monthData.slice(12,14));
    }else if(cycle === 3){
      tempData = monthData.slice(6,9).concat(monthData.slice(12,15));
    }else{
      tempData = monthData.splice(0,15);
    }
    tempData.push(...monthData.slice(16,17));
    tempData?.map((item,index) => {
      columns.push(item);
    });
  };


  return (
    <Table
      rowKey='key'
      // scroll={{ x: '120%' }}
      dataSource={tempData}
      columns={columns}
      pagination={false}
    />
  )
};

export default connect(() => ({}))(UnitManageTable);
